<template>
  <div style="position: relative">
    <h1>给用户和角色配资源</h1>
    <div style="position: absolute;top:200px;left:300px">
      <el-cascader v-model="list"
                   :options="ziyuan"
                   :props="props"
                   @change="resource"
                   placeholder="请选择资源信息"
                   clearable
      ></el-cascader>
    </div>
    <div style="position: absolute;top:200px;left: 900px">
      <el-select v-model="value" placeholder="请选择用户" @change="user">

        <el-option
            v-for="item in users"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div style="position: absolute;top:200px;left: 600px">
      <el-select v-model="value1" placeholder="请选择角色" @change="juese1">
        <el-option
            v-for="item in juese"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div style="position: absolute;top: 100px;right: 200px">
      <button @click="post_resource"
              style="color: white;background-color: #2f54eb;width: 100px;height: 35px;border: none;">添加用户资源
      </button>
    </div>
    <div style="position: absolute;top: 100px;left: 200px">
      <button @click="add_roles"
              style="color: white;background-color: #2f54eb;width: 100px;height: 35px;border: none;">添加角色资源
      </button>
    </div>
    <div style="position: absolute;top: 350px;left: 200px">
      <h1>给用户配角色</h1>
      <p v-for="i in roless" :key="i.id"><input type="checkbox" :value="i.id" v-model="rolelist">{{ i.name }}</p>
      <el-select v-model="userid" placeholder="请选择用户" @change="changeuserid">

        <el-option
            v-for="item in users"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        >
        </el-option>
      </el-select>
      <button @click="add_userrole"
              style="color: white;background-color: #2f54eb;width: 100px;height: 35px;border: none;">添加用户角色
      </button>
    </div>
  </div>
</template>

<script>
import maxios from "@/http/axios";

export default {
  name: "add_jszy",
  data() {
    return {
      props: {multiple: true},
      ziyuan: [],
      users: [],
      value: '',
      value1: '',
      form: {'user_id': '', 'list': ''},
      juese: [],
      roles: {'roleid': '', 'list': ''},
      list: [],
      roless: [],
      rolelist: [],
      userid: ''
    }
  },
  methods: {
    get_resource() {
      maxios('/users/resource', 'get').then(res => {
        if (res.code == 200) {
          this.ziyuan = res.ziyuan
          this.users = res.users
          console.log(res.ziyuan)
        }
      })
    },
    getrole() {
      maxios('/users/role', 'get').then(res => {
        if (res.code == 200) {
          this.roless = res.list
        }
      })
    },
    get_juese() {
      maxios('/users/juese', 'get').then(res => {
        if (res.code == 200) {
          this.juese = res.juese
        }
      })
    },
    resource(val) {
      let list = []
      for (let i in val) {
        list.push(val[i][0])
        list.push(val[i][1])
      }
      this.form.list = list
      this.roles.list = list
    },
    user(value) {
      this.form.user_id = value
    },
    juese1(value) {
      this.roles.roleid = value
    },
    changeuserid(value) {
      this.userid = value
    },
    post_resource() {
      maxios('/users/add_jszy', 'post', this.form).then(res => {
        if (res.code == 200) {
          this.$toast.success('添加成功')
        }
      })
    },
    add_userrole() {
      maxios('/users/role', 'post', {'rolelist': JSON.stringify(this.rolelist), 'userid': this.userid})
          .then(res => {
            if (res.code == 200) {
              alert('添加成功')
            } else {
              alert(res.mes)
            }
          })
    },
    add_roles() {
      maxios('/users/juese', 'post', this.roles).then(res => {
        if (res.code == 200) {
          alert('添加成功')
        }
      })

    }
  },
  mounted() {
    this.get_resource()
    this.get_juese()
    this.getrole()
  },

}
</script>

<style scoped>
.zd {
  width: 500px;
}
</style>